<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
// 定义数据类型
interface meteringStationData {
  id: number;
  stationCode: string;
  stationName: string;
  location: string;
  operationAreaFormatted: string;
  totalInterfaces: number;
  usedInterfaces: number;
  reservedInterfaces: number;
  downstreamDehydrationStation: string;
  capacity: number;
  remark: string;
  pipeCodeList: String[];
  wellCodeList: String[],
}

const data = ref<meteringStationData>({
  id: 0,
  stationCode: '',
  stationName: '',
  location: '',
  operationAreaFormatted: '',
  totalInterfaces: 0,
  usedInterfaces: 0,
  reservedInterfaces: 0,
  downstreamDehydrationStation: '',
  capacity: 0,
  remark: '',
  pipeCodeList: [],
  wellCodeList: [],
});

const [Modal, modalApi] = useVbenModal({
  showConfirmButton: false,
  onCancel() {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const modalData = modalApi.getData<Record<string, any>>();
      console.log("modalData:", modalData);
      const actualData = modalData.data;
      actualData.operationAreaFormatted = `工作区${actualData.operationArea}`
      if (actualData) {
        data.value = { ...data.value, ...actualData };
      }
    }
  },
  title: '计量间详情',
});
</script>
<template>
  <Modal>
    <div v-if="data">
      <!-- 显示指定的参数信息 -->
      <div>
        <p><strong>计量间ID:</strong> {{ data.id }}</p>
        <p><strong>计量站编号:</strong> {{ data.stationCode }}</p>
        <p><strong>计量站名称:</strong> {{ data.stationName }}</p>
        <p><strong>坐标:</strong> {{ data.location }}</p>
        <!-- <p><strong>所属工作区:</strong> {{ data.operationAreaFormatted }}</p> -->
        <!-- <p><strong>所辖井数:</strong> {{ data.所辖井数 }}</p> -->
        <p><strong>总接口数:</strong> {{ data.totalInterfaces }}</p>
        <p><strong>已用接口数:</strong> {{ data.usedInterfaces }}</p>
        <p><strong>预留接口数:</strong> {{ data.reservedInterfaces }}</p>
        <!-- <p><strong>下游脱水站:</strong> {{ data.downstreamDehydrationStation }}</p> -->
        <p><strong>容量:</strong> {{ data.capacity }}</p>
        <p><strong>备注:</strong> {{ data.remark }}</p>
        <!-- <p><strong>接收日期:</strong> {{ data.接收日期 }}</p> -->
      </div>

      <!-- 打印空行 -->
      <br />
      <hr />
      <br />

      <!-- 居中显示 关联管道信息 -->
      <div>
        <p style="text-align: center; background-color: #333232;"><strong>关联管道信息</strong></p>
      </div>
      <!-- 显示oilWellList中的数据中的管线编号，管线名称和一个序号-->
      <div class="oilWell-table">
        <div class="oilWell-header">
          <span class="oilWell-header-item">序号</span>
          <span class="oilWell-header-item">管线编号</span>
        </div>
        <div v-for="(pipeCode, index) in data.pipeCodeList" :key="index" class="oilWell-row">
          <span class="oilWell-item">{{ index + 1 }}.</span>
          <span class="oilWell-item">{{ pipeCode }}</span>
        </div>
      </div>

       <!-- 打印空行 -->
       <br />
      <hr />
      <br />

      <!-- 居中显示 关联油水井信息 -->
      <div>
        <p style="text-align: center; background-color: #333232;"><strong>关联油水井信息</strong></p>
      </div>
      <!-- 显示oilWellList中的数据中的管线编号，管线名称和一个序号-->
      <div class="oilWell-table">
        <div class="oilWell-header">
          <span class="oilWell-header-item">序号</span>
          <span class="oilWell-header-item">油水井编号</span>
        </div>
        <div v-for="(wellCode, index) in data.wellCodeList" :key="index" class="oilWell-row">
          <span class="oilWell-item">{{ index + 1 }}.</span>
          <span class="oilWell-item">{{ wellCode }}</span>
        </div>
      </div>

    </div>
  </Modal>
</template>

<style scoped>
/* 这里可以添加一些CSS样式来美化Modal */
<style scoped>

/* 这里可以添加一些CSS样式来美化Modal */
p {
  padding: 5px;
  margin: 0;
}

strong {
  margin-right: 10px;
}

.oilWell-table {
  border-collapse: collapse;
  width: 100%;
}

.oilWell-header,
.oilWell-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}

.oilWell-item {
  width: 50%;
  text-align: left;
  padding: 5px;
  border-bottom: 1px solid #ddd;
}

.oilWell-header-item {
  width: 50%;
  text-align: left;
  padding: 5px;
  border-bottom: 1px solid #ddd;
  color: #ddd;
  /* 设置字体颜色为深灰色 */
  font-weight: bold;
}


.oilWell-header-item {
  font-weight: bold;
}
</style>

